<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../reset.css">
    <script src="../set.js"></script>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(4,25%);
        }
        .grid-auto-flow{
            grid-auto-flow: column;
            /* 跟列一样，设置显示几行，哪怕你有100个元素，也只给你显示成3行 */
            grid-template-rows: 50px 50px 50px; 
        }

    </style>
</head>

<body>
    <div class="container grid-auto-flow">
        <div class="item-1" >第一个</div>
        <div class="item-2" >第二个</div>
        <div class="item-3" >第三个</div>
        <div class="item-4" >第四个</div>
        <div class="item-5" >第五个</div>
        <div class="item-6" >第六个</div>
    </div>
    
    <code>
        <h4>grid 和 grid-area</h4>
        grid 和 grid-area 都是一些属性的简写，感觉理解起来有点难，个人不太崇尚使用<br>

        grid: 行、列、以及行列宽高、间距属性的简写<br>
        grid-area: 合并行、列那几个属性的简写 grid-row-start、grid-column-start、grid-row-end、grid-column-end

        <h4>grid-auto-columns</h4>
        设置默认列的宽度，好像没啥用？因为我们通常用 grid-template-columns 来定义列的一些配置信息（已经指定了列的宽度，这时候用 grid-auto-columns 是不生效的）

        <h4>grid-auto-rows</h4>
        设置默认行的高度，这还行

        <h4>grid-auto-flow</h4>
        控制网格元素排列方式<br>
        row: 也是默认值，增加行的方式继续往下排列<br>
        column: 网格元素排列方式是列（从上往下的顺序，往后面添加），多行时就可以看到效果 --- 是从上往下排的顺序<br>
        dense； 简单理解就是 宽度是auto的<br>
       
        总结：这个就是控制元素的排列方式，是按行新增？按列新增？（应该带了 auto 的属性就表示单独去设置，这会影响 grid-template-columns、grid-template-row 的设置）

        <h4>grid-column</h4>
        列合并两个属性的简写（grid-column-start、grid-column-end），中间使用 / 分割开<br>
        grid-column: 1 / 3;

        <h4>grid-row</h4>
        行合并两个属性的简写（grid-row-start、grid-row-end）用法同上

        <h4>grid-column-gap</h4>
        列的间距（也可以写作 column-gap ）

        <h4>grid-row-gap</h4>
        行的间距（也可以写作 row-gap ）

        <h4>gap (grid-gap)</h4>
        列、行的间距简写（同样，个人不太提倡使用简写方式）

        <h4>除去 grid-template-columns、grid-template-row 设置列、行相关信息外，还有个 grid-template-areas</h4>
        主要通过与 grid areas（可以理解为给元素命名了） 联系，来设置列、行的信息
        <pre>
            <code>
                &lt;section id="page"&gt;
                    &lt;header&gt;Header&lt;/header&gt;
                    &lt;nav&gt;Navigation&lt;/nav&gt;
                    &lt;main&gt;Main area&lt;/main&gt;
                    &lt;footer&gt;Footer&lt;/footer&gt;
                &lt;/section&gt;
            </code>
        </pre>
        <pre>
            <code>
                #page {
                    display: grid; /* 1.设置 display 为 grid */
                    width: 100%;
                    height: 250px;
                    grid-template-areas: "head head"
                                         "nav  main"
                                         "nav  foot"; /* 2.区域划分 当前为 三行 两列 */
                    grid-template-rows: 50px 1fr 30px; /* 3.各区域 宽高设置 */
                    grid-template-columns: 150px 1fr;
                  }
                  
                #page > header {
                    grid-area: head; /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
                    background-color: #8ca0ff;
                }
                
                #page > nav {
                    grid-area: nav;
                    background-color: #ffa08c;
                }
                
                #page > main {
                    grid-area: main;
                    background-color: #ffff64;
                }
                
                #page > footer {
                    grid-area: foot;
                    background-color: #8cffa0;
                }
            </code>
        </pre>
        <h4>小总结</h4>
        个人感觉，grid 布局能运用设置 列、行、宽高、合并、间距应该就够了，至于属性的简写以及一些其他的专业词汇（span --- 间距）可以需要时再通过文档学习
    </code>
    <script>
        setDomStyle('container')
    </script>
</body>

</html>